import React, { Component } from 'react';
import { connect } from 'react-redux';
import './cart-chongzhi.scss'
import {Toast, Modal} from 'antd-mobile'

const alert = Modal.alert;
class Com extends Component {
  render () {
    const element =(
      <><img src="images/jg_03.png" alt=""/><p>请填写充值金额后重试！</p></>
    )
    return (
      <>
        <header className="header chongzhi-header">
          <div className="chongzhi-h-s">
            <span className="iconfont icon-arrow-left" onClick={() => {
              window.history.back()
            }}></span>
            <span>在线充值</span>
            <span></span>
          </div>
          <input type="text" placeholder="请输入充值金额"/>
        </header>
        <div className="content chongzhi-content">
          <div className="chongzhi-c-s">
            <p>支付方式</p>
          </div>
          <div className="chongzhi-c-x">
            <div className="chongzhi-fs"  onClick={()=>{
              Toast.info(element,2)
            }}>
              <img src="images/cz_03.png" alt=""/>
              <p>微信支付</p>
            </div>
            <div className="chongzhi-fs"  onClick={()=>{
              Toast.info(element,2)
            }}>
              <img src="images/cz_05.png" alt=""/>
              <p>支付宝支付</p>
            </div>
            <div className="chongzhi-fs"  onClick={()=>{
              alert('等待结果', '已前往第三页面进行支付，等待第三方平台返回支付结果', [
                { text: '取消支付', onPress: () => console.log('cancel') },
                { text: '确认支付', onPress: () => {console.log('ok')} },
              ])
            }}>
              <img src="images/cz_07.png" alt=""/>
              <p>银联支付</p>
            </div>
          </div>
        </div>
      </>
    )
  }
}
export default connect()(Com)